<!DOCTYPE html>
<html lang="zh-CN">
<!-- BEGIN: Head Section -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站点设置 - 睿途题库管理系统</title>
    
    <!-- BEGIN: Global Stylesheets -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/remixicon.min.css" rel="stylesheet">
    <!-- END: Global Stylesheets -->
    
    <!-- BEGIN: Custom Styles -->
    <link href="assets/css/ruitu.css" rel="stylesheet">
    <!-- END: Custom Styles -->
</head>
<!-- END: Head Section -->

<body class="font-inter bg-gray-50 min-h-screen flex flex-col bg-education">
    <!-- BEGIN: Background Decorations -->
    <div class="absolute inset-0 overflow-hidden -z-10">
        <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-primary/10 animate-float">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-6xl education-icon">
                <i class="ri-settings-2-line"></i>
            </div>
        </div>
        <div class="absolute bottom-20 right-20 w-60 h-60 rounded-full bg-secondary/10 animate-float" style="animation-delay: -2s">
            <div class="w-full h-full flex items-center justify-center text-secondary/20 text-7xl education-icon">
                <i class="ri-global-line"></i>
            </div>
        </div>
    </div>
    <!-- END: Background Decorations -->

    <!-- BEGIN: Header -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="flex items-center justify-between px-4 h-[72px] max-w-7xl mx-auto">
            <div class="flex items-center flex-1 justify-center">
                <a href="admin-dashboard.html" class="flex items-center space-x-2 mr-6 absolute left-4">
                    <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                        <i class="ri-question-answer-line text-lg"></i>
                    </div>
                    <h1 class="text-lg font-bold text-dark">睿途题库管理系统</h1>
                </a>
                
                <!-- 顶部导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="admin-dashboard.html" class="nav-item" data-section="dashboard" onclick="showMenu('dashboard-menu')">
                        <i class="ri-dashboard-line mr-2"></i> 仪表盘
                    </a>
                    <a href="#" class="nav-item" data-section="textbook" onclick="showMenu('textbook-menu')">
                        <i class="ri-book-open-line mr-2"></i> 教材版本
                    </a>
                    <a href="question-list.html" class="nav-item" data-section="question">
                        <i class="ri-book-2-line mr-2"></i> 题库管理
                    </a>
                    <a href="#" class="nav-item" data-section="exam">
                        <i class="ri-graduation-cap-line mr-2"></i> 考试管理
                    </a>
                    <a href="#" class="nav-item" data-section="statistics">
                        <i class="ri-bar-chart-2-line mr-2"></i> 数据分析
                    </a>
                    <a href="site-settings.html" class="nav-item active" data-section="settings">
                        <i class="ri-settings-3-line mr-2"></i> 系统设置
                    </a>
                </div>
            </div>
            
            <div class="flex items-center">
                <button class="flex items-center justify-center w-8 h-8 text-muted hover:text-primary transition-colors relative">
                    <i class="ri-notification-3-line text-xl"></i>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
                </button>
                <div class="flex items-center ml-1">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                    <span class="hidden md:inline text-sm font-medium text-dark ml-2">张老师</span>
                    <i class="ri-arrow-down-s-line text-muted ml-0.5"></i>
                </div>
                <button class="md:hidden ml-1 w-8 h-8 flex items-center justify-center text-muted hover:text-primary transition-colors" id="mobile-menu-button">
                    <i class="ri-menu-line text-xl"></i>
                </button>
            </div>
        </div>
    </header>
    <!-- END: Header -->

    <!-- BEGIN: Main Content Area -->
    <main class="flex-grow flex">
        <!-- BEGIN: Sidebar -->
        <aside id="sidebar" class="w-56 bg-sidebar-bg shadow-sidebar transition-all duration-300 h-[calc(100vh-72px)] sticky top-[72px] overflow-y-auto">
            <!-- 仪表盘菜单 -->
            <div id="dashboard-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">仪表盘</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-dashboard-3-line"></i>
                        <span>数据概览</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-line"></i>
                        <span>趋势分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-2-line"></i>
                        <span>数据报表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-notification-2-line"></i>
                        <span>系统通知</span>
                    </div>
                </div>
            </div>
            
            <!-- 教材版本菜单 -->
            <div id="textbook-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">教材版本</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>人教版</span>
                    </div>
                    <div class="pl-8">
                        <div class="sidebar-item">
                            <span>七年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>七年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级下册</span>
                        </div>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>北师大版</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>苏教版</span>
                    </div>
                    <div class="border-t border-gray-200 my-2"></div>
                    <div class="sidebar-item">
                        <i class="ri-add-line"></i>
                        <span>添加新版本</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-line"></i>
                        <span>版本管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理菜单 -->
            <div id="question-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">题库管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <a href="question-list.html" class="flex items-center space-x-3">
                            <i class="ri-file-list-3-line"></i>
                            <span>题目列表</span>
                        </a>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>添加题目</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-folder-line"></i>
                        <span>题目分类</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-price-tag-3-line"></i>
                        <span>标签管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-flag-line"></i>
                        <span>待审核题目</span>
                    </div>
                </div>
            </div>
            
            <!-- 考试管理菜单 -->
            <div id="exam-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">考试管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-calendar-line"></i>
                        <span>考试安排</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-file-text-line"></i>
                        <span>试卷管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>创建试卷</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-group-line"></i>
                        <span>考生管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-check-double-line"></i>
                        <span>成绩管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 数据分析菜单 -->
            <div id="statistics-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">数据分析</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-bar-chart-line"></i>
                        <span>答题统计</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-fill"></i>
                        <span>学习进度</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-line"></i>
                        <span>正确率分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-line"></i>
                        <span>用户行为</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-download-line"></i>
                        <span>数据导出</span>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置菜单 -->
            <div id="settings-menu" class="sidebar-menu active">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">系统设置</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item active">
                        <i class="ri-global-line"></i>
                        <span>站点设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-settings-line"></i>
                        <span>注册设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-4-line"></i>
                        <span>基础设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-shield-keyhole-line"></i>
                        <span>安全设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-admin-line"></i>
                        <span>角色权限</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-database-2-line"></i>
                        <span>数据备份</span>
                    </div>
                </div>
            </div>
        </aside>
        <!-- END: Sidebar -->

        <!-- BEGIN: Page Content -->
        <div class="flex-grow p-6">
            <div class="max-w-4xl mx-auto">
                <!-- Page Title -->
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-dark">站点设置</h2>
                    <p class="text-muted mt-2">配置网站的基本信息和功能参数</p>
                </div>

                <!-- Settings Form -->
                <div class="bg-white rounded-xl shadow-card p-6">
                    <form>
                        <!-- 系统配置部分 -->
                        <div class="mb-8">
                            <h3 class="text-lg font-bold text-dark mb-4">系统配置</h3>
                            <div class="space-y-4">
                                <div class="form-group">
                                    <label class="form-label">系统时区</label>
                                    <select class="form-input">
                                        <option value="Asia/Shanghai">Asia/Shanghai (UTC+8)</option>
                                        <option value="UTC">UTC</option>
                                        <option value="America/New_York">America/New_York (UTC-4)</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">网站语言</label>
                                    <select class="form-input">
                                        <option value="zh-CN">简体中文</option>
                                        <option value="en">English</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">系统缓存时间（分钟）</label>
                                    <input type="number" class="form-input" value="60" min="0" max="1440">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">上传文件大小限制（MB）</label>
                                    <input type="number" class="form-input" value="10" min="1" max="100">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">允许上传的文件类型</label>
                                    <input type="text" class="form-input" value="jpg,jpeg,png,gif,doc,docx,pdf" placeholder="请输入文件扩展名，用逗号分隔">
                                </div>
                                <div class="form-group">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                        <span class="text-sm text-gray-700">开启网站维护模式</span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                        <span class="text-sm text-gray-700">允许用户注册</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- SEO设置部分 -->
                        <div class="mb-8">
                            <h3 class="text-lg font-bold text-dark mb-4">SEO设置</h3>
                            <div class="space-y-4">
                                <div class="form-group">
                                    <label class="form-label">首页标题</label>
                                    <input type="text" class="form-input" value="睿途题库 - 专业的在线题库管理系统" placeholder="请输入首页标题">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Meta Keywords</label>
                                    <input type="text" class="form-input" value="题库系统,在线考试,教育管理" placeholder="请输入关键词，用逗号分隔">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Meta Description</label>
                                    <textarea class="form-input" rows="3" placeholder="请输入网站描述">睿途题库是一个专业的在线题库管理系统，提供题目管理、在线考试、成绩分析等全方位服务。</textarea>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">robots.txt内容</label>
                                    <textarea class="form-input font-mono text-sm" rows="4">User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 邮件服务器配置部分 -->
                        <div class="mb-8">
                            <h3 class="text-lg font-bold text-dark mb-4">邮件服务器配置</h3>
                            <div class="space-y-4">
                                <div class="form-group">
                                    <label class="form-label">SMTP服务器地址</label>
                                    <input type="text" class="form-input" value="smtp.example.com" placeholder="请输入SMTP服务器地址">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">SMTP端口</label>
                                    <input type="number" class="form-input" value="465" placeholder="请输入SMTP端口">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">邮箱账号</label>
                                    <input type="email" class="form-input" value="noreply@ruitu.com" placeholder="请输入邮箱账号">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">邮箱密码</label>
                                    <input type="password" class="form-input" value="********" placeholder="请输入邮箱密码">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">发件人名称</label>
                                    <input type="text" class="form-input" value="睿途题库系统" placeholder="请输入发件人名称">
                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn-secondary">
                                        <i class="ri-mail-send-line mr-2"></i>
                                        发送测试邮件
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 第三方集成部分 -->
                        <div class="mb-8">
                            <h3 class="text-lg font-bold text-dark mb-4">第三方集成</h3>
                            <div class="space-y-4">
                                <!-- 短信服务配置 -->
                                <div class="form-group">
                                    <label class="form-label">短信服务提供商</label>
                                    <select class="form-input">
                                        <option value="aliyun">阿里云短信</option>
                                        <option value="tencent">腾讯云短信</option>
                                        <option value="other">其他服务商</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">AccessKey ID</label>
                                    <input type="text" class="form-input" value="LTAI4**********************" placeholder="请输入AccessKey ID">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">AccessKey Secret</label>
                                    <input type="password" class="form-input" value="********" placeholder="请输入AccessKey Secret">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">短信签名</label>
                                    <input type="text" class="form-input" value="睿途教育" placeholder="请输入短信签名">
                                </div>

                                <!-- 对象存储配置 -->
                                <div class="mt-6">
                                    <h4 class="text-base font-semibold text-dark mb-4">对象存储配置</h4>
                                    <div class="space-y-4">
                                        <div class="form-group">
                                            <label class="form-label">存储类型</label>
                                            <select class="form-input">
                                                <option value="local">本地存储</option>
                                                <option value="oss">阿里云OSS</option>
                                                <option value="cos">腾讯云COS</option>
                                                <option value="qiniu">七牛云存储</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Bucket名称</label>
                                            <input type="text" class="form-input" value="ruitu-files" placeholder="请输入Bucket名称">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">访问域名</label>
                                            <input type="text" class="form-input" value="https://files.ruitu.com" placeholder="请输入访问域名">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">AccessKey ID</label>
                                            <input type="text" class="form-input" value="LTAI4**********************" placeholder="请输入AccessKey ID">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">AccessKey Secret</label>
                                            <input type="password" class="form-input" value="********" placeholder="请输入AccessKey Secret">
                                        </div>
                                    </div>
                                </div>

                                <!-- 统计代码 -->
                                <div class="mt-6">
                                    <h4 class="text-base font-semibold text-dark mb-4">统计代码</h4>
                                    <div class="form-group">
                                        <label class="form-label">百度统计代码</label>
                                        <textarea class="form-input font-mono text-sm" rows="4" placeholder="请输入百度统计代码"><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 水印设置部分 -->
                        <div class="mb-8">
                            <h3 class="text-lg font-bold text-dark mb-4">水印设置</h3>
                            <div class="space-y-4">
                                <div class="form-group">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                        <span class="text-sm text-gray-700">启用图片水印</span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">水印类型</label>
                                    <select class="form-input">
                                        <option value="text">文字水印</option>
                                        <option value="image">图片水印</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">水印文字</label>
                                    <input type="text" class="form-input" value="© 睿途题库" placeholder="请输入水印文字">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">水印位置</label>
                                    <select class="form-input">
                                        <option value="center">居中</option>
                                        <option value="top-left">左上角</option>
                                        <option value="top-right">右上角</option>
                                        <option value="bottom-left">左下角</option>
                                        <option value="bottom-right">右下角</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">水印透明度</label>
                                    <input type="range" class="w-full" min="0" max="100" value="50">
                                </div>
                            </div>
                        </div>

                        <!-- 验证码设置部分 -->
                        <div class="mb-8">
                            <h3 class="text-lg font-bold text-dark mb-4">验证码设置</h3>
                            <div class="space-y-4">
                                <div class="form-group">
                                    <label class="form-label">验证码类型</label>
                                    <select class="form-input">
                                        <option value="default">系统默认</option>
                                        <option value="geetest">极验验证码</option>
                                        <option value="tencent">腾讯验证码</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">AppID/Key</label>
                                    <input type="text" class="form-input" placeholder="请输入AppID或Key">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">AppSecret</label>
                                    <input type="password" class="form-input" placeholder="请输入AppSecret">
                                </div>
                                <div class="form-group">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                        <span class="text-sm text-gray-700">登录时启用验证码</span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                        <span class="text-sm text-gray-700">注册时启用验证码</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="flex items-center justify-end space-x-4">
                            <button type="button" class="btn-secondary">取消</button>
                            <button type="submit" class="btn-primary">
                                <i class="ri-save-line mr-2"></i>
                                保存设置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- END: Page Content -->
    </main>
    <!-- END: Main Content Area -->

    <!-- JavaScript 库文件 -->
    <script src="assets/js/tailwind.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f90ff',
                        accent: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        muted: '#64748b',
                        'sidebar-bg': '#f8fafc',
                        'sidebar-item': '#64748b',
                        'sidebar-item-active': '#2563eb',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 15px 35px -5px rgba(37, 99, 235, 0.15)',
                        'sidebar': '0 0 20px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        };
    </script>
    
    <!-- 页面功能脚本 -->
    <script>
        // 导航菜单切换
        const navItems = document.querySelectorAll('.nav-item');
        const sidebarMenus = document.querySelectorAll('.sidebar-menu');

        // 显示指定菜单
        function showMenu(menuId) {
            sidebarMenus.forEach(menu => {
                if (menu.id === menuId) {
                    menu.classList.remove('hidden');
                    menu.classList.add('active');
                    // 激活该菜单的第一个项目
                    const firstItem = menu.querySelector('.sidebar-item');
                    if (firstItem) {
                        menu.querySelectorAll('.sidebar-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        firstItem.classList.add('active');
                    }
                } else {
                    menu.classList.add('hidden');
                    menu.classList.remove('active');
                }
            });
        }

        // 激活指定的导航项和对应的侧边栏菜单
        function activateNavSection(section) {
            // 更新顶部导航状态
            navItems.forEach(nav => {
                if (nav.dataset.section === section) {
                    nav.classList.add('active');
                } else {
                    nav.classList.remove('active');
                }
            });
            
            // 显示对应的侧边栏菜单
            showMenu(`${section}-menu`);
        }

        // 为导航项添加点击事件
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const section = item.dataset.section;
                activateNavSection(section);
            });
        });

        // 移动端菜单
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');

        if (mobileMenuButton && sidebar) {
            mobileMenuButton.addEventListener('click', () => {
                sidebar.classList.toggle('-translate-x-full');
            });
        }

        // 侧边栏菜单项点击
        function initSidebarItems() {
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            sidebarItems.forEach(item => {
                item.addEventListener('click', (e) => {
                    // 防止链接跳转时重复处理
                    if (item.querySelector('a')) {
                        return;
                    }
                    
                    const parentMenu = item.closest('.sidebar-menu');
                    if (parentMenu && !parentMenu.classList.contains('hidden')) {
                        parentMenu.querySelectorAll('.sidebar-item').forEach(si => {
                            si.classList.remove('active');
                        });
                        item.classList.add('active');
                    }
                });
            });
        }

        // 初始化页面时激活系统设置
        document.addEventListener('DOMContentLoaded', () => {
            activateNavSection('settings');
            initSidebarItems();
        });
    </script>
</body>
</html> 